<template>
    <div class="guess-content">
        <div class="content-title">
            <span>猜你喜欢</span>
        </div>
        <div class="content-container">
            <div class="container-item" v-for="item,index in guessLike.items" :key="index">
                <img :src="item.picture" alt="商品图片" @click="showGoodDetail(item.id)">
                <p class="item-title">{{ item.name }}</p>
                <p class="item-price">￥{{ item.price }}</p>
            </div>
        </div>
        <span class="content-bottom">{{ guessLike.page >= guessLike.pages ? '已经到底了' : '加载中...'}}</span>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
//@ts-ignore引入请求函数
import { reqGuessLikeList } from "@/api/home.ts";
//引入ts类型约束
import type { reqGuessLikeResponse } from "@/type/home";


//猜你喜欢数据
const guessLike = ref<reqGuessLikeResponse>({
    counts:0,
    pageSize:10,
    pages:1,
    page:0,
    items:[]
})
//vue生命周期
onMounted(() => {
    //获取猜你喜欢数据
    getGuessLikeList();
})

//获取猜你喜欢数据
const getGuessLikeList = async () => {
    //请求下一页数据
    if(guessLike.value.page >= guessLike.value.pages) return;
    guessLike.value.page ++;
    let res = await reqGuessLikeList(guessLike.value.page, guessLike.value.pageSize);
    guessLike.value.pages = res.result.pages;
    guessLike.value.page = res.result.page;
    if(guessLike.value.items.length == 0){
        guessLike.value.items = res.result.items;
    } else {
        guessLike.value.items.push(...res.result.items);
    }
    console.log('猜你喜欢数据api',res);
}

//点击商品的事件
const showGoodDetail = (goodId:string) => {
    console.log('goodId=',goodId);
}

//向外导出
defineExpose({
    getGuessLikeList,
})

</script>

<style scoped lang="less">
.guess-content{
    display:flex;
    flex-direction:column;
    align-items:center;

    .content-title{
        display:flex;
        justify-content:center;
        align-items:center;
        margin:18px 0;
        span{
            font-size:16px;
            color:#000;
            margin:0 10px;
        }
        &::before{
            content:"";
            width:10px;
            height:10px;
            background:url("../../assets/images/bubble.png");
            background-size:contain;
        }
        &::after{
            content:"";
            width:10px;
            height:10px;
            background:url("../../assets/images/bubble.png");
            background-size:contain;
        }
    }
    .content-container{
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap;
        margin: 0 10px;

        .container-item{
            width:175px;
            height:220px;
            position: relative;
            padding:12px;
            display:flex;
            flex-direction:column;
            justify-content: space-between;
            margin-bottom:6px;
            background-color:#fff;

            img{
                width:150px;
                height:150px;
            }
            .item-title{
                color:#000;
                font-size:12px;
                margin:5px 0 10px 0;
            }
            .item-price{
                color:#ff0000;
                font-size:10px;
            }
        }
    }
    .content-bottom{
        font-size:12px;
        color:#44bb94;
        margin:20px 0;
    }
}
</style>